<style scoped>
   .dashboard-container{
     min-height:100%;
     padding:20px;
     background-color: #ececec;
  }
  .c-header-title{
    text-align: left;
    font-size:16px;
    color:#555;
  }
  .c-header-extra{
    text-align: right;
    font-size:14px;
    color:#aaa;
  }
  .c-header-extra.tabs .tab{
    cursor: pointer;
  }
  .c-header-extra.tabs .tab-active{
    color:#0099CC;
  }
  .dashboard-container .cBody{
    text-align: left;
  }
  .dashboard-container .stat-t{
    font-size: 14px;
    color:#555;
  }
  .dashboard-container .stat-p{
    font-size: 26px;
    color:#000;
    font-weight: bolder;
  }
  .chart-box{
    width:90%;
  }
   .sale-show-box,.sale-show-box li{
     list-style: none;
   }
   .sale-show-box li{
     padding:10px 0;
     text-align: left;
     border-bottom:1px solid #e2e2e2;
   }
   .sale-show-box .total{
     text-align: center;
   }
   .sale-show-box .per{
     text-align: center;
   }
</style>
<template>
  <div class="page-container">
    <div class="dashboard-container">
      <a-card>
        <ul class="sale-show-box">
          <li v-for="(shop,sIndex) in resp.shopList" :key="sIndex">
            <a-row>
              <a-col :span="3">
                {{shop.name}}
              </a-col>
              <!--<a-col :span="3" class="total">商品数量<span class="color-dodgerblue"> {{shop.row}}</span> (种)</a-col>-->
              <a-col :span="6" class="per">商品库存<span class="color-dodgerblue"> {{shop.count}} </span></a-col>
            </a-row>
          </li>
        </ul>
      </a-card>
      <a-card style="margin-top:20px;">
        <h3 slot="title" class="c-header-title">库存变动<span></span></h3>
        <div slot="extra" class="c-header-extra tabs">
          <span v-if="params.type !== 'custom'">
            <span :class="['tab',{'tab-active':params.type==='today'}]" @click="onTabChange('today')">今日</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='yesterday'}]" @click="onTabChange('yesterday')">昨日</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='week'}]" @click="onTabChange('week')">本周</span>
            <a-divider type="vertical" />
            <span :class="['tab',{'tab-active':params.type==='month'}]" @click="onTabChange('month')">本月</span>
          </span>
          <span v-else>
            <a-range-picker style="text-align: left;width:310px;margin-right:5px;"
                            v-model="params.dates"
                            :showTime="{ hideDisabledOptions: true,
                defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
                            format="YYYY-MM-DD HH:mm:ss"
            />
            <a-button type="primary" @click="onSearch">确定</a-button>
          </span>
          <a-divider type="vertical" />
          <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="plus-circle" @click="onTabChange('custom')" v-if="params.type !== 'custom'"></a-button>
          <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="close-circle" @click="onTabChange('today')" v-else></a-button>
        </div>
        <div class="chart-box">
          <bar-chart :chartData="resp.stockMap"></bar-chart>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script>
    import {findStockStat} from "@/api/dashboard";
    import { mapGetters } from 'vuex'
    import {BarChart} from './components'
    import moment from 'moment';
    export default {
      components: {BarChart},
      name: 'Dashboard',
        data() {
            return {
                params:{
                    type:'today',
                    beginDate:moment().format("YYYY-MM-DD 00:00:00"),
                    endDate: moment().format("YYYY-MM-DD 23:59:59"),
                    dates:[],
                },
                resp:{
                    stockMap:{},
                    shopList:[],
                },
            }
        },
        computed: {
            ...mapGetters([
                'roles'
            ]),
        },
        methods:{
            moment,
            onSearch(){
                if (this.params.dates.length == 0) {
                    this.$message.info('请选择查询日期');
                    return;
                }
                this.params.beginDate = this.params.dates[0].format('YYYY-MM-DD HH:mm:ss');
                this.params.endDate = this.params.dates[1].format('YYYY-MM-DD HH:mm:ss');
                this.onLoad();
            },
            onTabChange(tab){
                if(this.params.type == tab) return;
                switch(tab){
                    case "today":
                        this.params.beginDate = moment().format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().format("YYYY-MM-DD 23:59:59");
                        break;
                    case "yesterday":
                        this.params.beginDate = moment().subtract(1, 'days').format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().subtract(1, 'days').format("YYYY-MM-DD 23:59:59");
                        break;
                    case "week":
                        let weekOfDay = moment().format('E');//计算今天是这周第几天
                        this.params.beginDate = moment().subtract(weekOfDay-1, 'days').format('YYYY-MM-DD 00:00:00');//周一日期
                        this.params.endDate = moment().add(7-weekOfDay, 'days').format('YYYY-MM-DD 23:59:59');//周日日期
                        break;
                    case "month":
                        this.params.beginDate = moment().format('YYYY-MM-01 00:00:00');//本月一号日期
                        this.params.endDate = moment(this.params.beginDate).add(1,"months").subtract(1, 'days').format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        break;
                    case "custom":
                        this.params.beginDate = moment().subtract(14,"days").format('YYYY-MM-DD 00:00:00');//本月一号日期
                        this.params.endDate = moment().format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        this.params.dates = [moment(this.params.beginDate),moment(this.params.endDate)];
                        break;
                }
                this.params.type = tab;
                this.onLoad();
            },
            async onLoad(){
                let resp = await  findStockStat(this.params);
                if(!this.qUtil.validResp(resp)){
                    this.$error({title:'请求失败!',okText:'确定'});
                    return false;
                }
                this.resp = resp.data;
            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>
